<template>
  <!-- 添加模板-->
  <div class="app">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="t">
        <el-tab-pane label="基本信息" name="first"></el-tab-pane>
        <el-tab-pane label="多余的知识点列表"></el-tab-pane>
      </el-tabs>
      <!-- 表单-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="box">
      <el-form-item label="教学计划名称" prop="name">
        <el-input v-model="ruleForm.name" class="input" size="mini" clearable placeholder="请填入教学计划名称"></el-input>
      </el-form-item>
      <el-form-item label="所属课程" prop="courseIds">
          <el-select v-model="ruleForm.courseIds" placeholder="请选择" size="mini" class="input top" clearable>
            <el-option label="无敌培训" value="shanghai"></el-option>
            <el-option label="Java基础测试课程" value="beijing"></el-option>
            <el-option label="C语言" value="beijing"></el-option>
            <el-option label="ass" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学分" prop="credit">
          <el-input v-model="ruleForm.credit" class="input top" size="mini" clearable placeholder="请填入教学计划名称"></el-input>
        </el-form-item>
        <el-form-item label="学时" prop="creditHours">
          <el-input v-model="ruleForm.creditHours" class="input top" size="mini" clearable placeholder="请填入教学计划名称"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="detailsString">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入教学进度计划应用范围的说明"
              v-model="ruleForm.detailsString"
              class="text">
              </el-input>
        </el-form-item>
        <el-form-item label="持续时间" prop="duration">
          <el-input v-model="ruleForm.duration" class="input top" size="mini" clearable placeholder="请填入教学计划名称"></el-input>
        </el-form-item>

      <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" class="btn top">保存</el-button>
          <el-button @click="resetForm('ruleForm')" class="btn top">取消</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  data () {
    return {
      activeName: 'first',
      ruleForm: {
        name: '',
        courseIds: '',
        credit: 2,
        creditHours: 16,
        detailsString: '',
        duration: 1
      },
      rules: {
        name: [
          {required: true, message: '教学计划模板名称不能为空', trigger: 'blur'}
        ],
        courseIds: [
          {required: true, message: '所属课程不能为空', trigger: 'blur'}
        ],
        duration: [
          {required: true, message: '持续时间不能为空', trigger: 'blur'}
        ],
        detailsString: [
          {required: true, message: '教学计划模板概述不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  components: {

  },
  methods: {
    handleClick(tab, event) {
            console.log(tab, event);
          },
    submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
  }
}
</script>

<style scoped="scoped" lang="scss">
  @import '../assets/style/common.scss';
  .app {
    width: 100%;
    height: 100%;
    .t {
      margin-left: 70px;
      margin-top: 20px;
      .radio {
        margin-left: 60px;
      }
    }
    .box {
      margin-top: 30px;
      width: 90%;
      height: 80%;
      margin-left: 45px;
      .input {
        width: 90%;
        margin-left: 30px;
      }
      .radio {
       margin-left: 30px;
      }
      .btn {
        width: 55px;
        height: 30px;
      }
      .top {
        margin-top: 20px;
      }
      .text {
        margin-top: 20px;
        margin-left: 30px;
        width: 90%;
      }
     }
  }
</style>
